<template>
  <div id="app">
    <img src="./assets/logo.png" />
    <div class="style-show-box">
      <div class="test1">这里是App.vue</div>
      <div class="btn-group">
        <el-select v-model="theme" placeholder="请选择" @change="changeTheme">
          <el-option
            v-for="item in theme_list"
            :key="item.type"
            :label="item.name"
            :value="item.type">
          </el-option>
        </el-select>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-input></el-input>
        <el-radio></el-radio>
        <el-checkbox></el-checkbox>
        <div class="block">
          <el-alert class='alert-item' title="成功提示的文案" type="success">
          </el-alert>
          <el-alert class='alert-item' title="消息提示的文案" type="info">
          </el-alert>
          <el-alert class='alert-item' title="警告提示的文案" type="warning">
          </el-alert>
          <el-alert class='alert-item' title="错误提示的文案" type="error">
          </el-alert>
        </div>
      </div>
    </div>
    <!-- 路由 -->
    <router-view/>
  </div>
</template>

<script>
import '@/assets/css/theme/default/index.css';
import '@/assets/css/theme/purple/index.css';
import '@/assets/css/theme/green/index.css';

export default {
  name: 'App',
  data(){
    return{
      theme:"",
      theme_list:[{
        name:'默认',
        type:'default'
      },{
        name:'紫色',
        type:'purple'
      },{
        name:'绿色',
        type:'green'
      }],
    }
  },
  beforeCreate(){
    //设置body的class
    let theme=window.localStorage.getItem("theme")||'default';
    document.body.setAttribute("class","custom-" + theme);
  },
  created(){
    
  },
  methods:{
    changeTheme(val){
      document.body.setAttribute("class","custom-" + val);
      console.log("app changeTheme",val)
      window.localStorage.setItem("theme",val)
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
<style scoped lang="stylus">
#app
  transition 1s all
.style-show-box
  display flex
.test1
  width 100px
  height 100px
  background-color glob-bg
</style>


